<template>
  <div class="home">
    <!-- <img alt="Vue logo" src="../assets/logo.png" /> -->
    <van-cell @click="showPopup" class="iconfont iconfenlei"></van-cell>
    <van-popup v-model="show" position="left" :style="{ height: '100%',width:'160px' }">
      <van-image
        round
        width="5rem"
        height="5rem"
        :style="{ marginTop:'1rem' }"
        src="https://img.yzcdn.cn/vant/cat.jpeg"
      />
      <span class="logOut" @touchstart="logOut">退出</span>
    </van-popup>
    <van-tabs v-model="active">
      <van-tab title="我的">
        <Mine />
      </van-tab>
      <van-tab title="发现">
        <Find />
      </van-tab>
      <van-tab title="推荐">
        <Recommend />
      </van-tab>
    </van-tabs>
    <router-link tag="span" to="/musicSearch" class="iconfont iconsousuo2"></router-link>
    <!-- <Mine msg="Welcome to Your Vue.js App" /> -->
    <router-view></router-view>
  </div>
</template>

<script>
// @ is an alias to /src
import Mine from '@/components/Mine.vue'
import Find from '@/components/Find.vue'
import Recommend from '@/components/Recommend.vue'

export default {
  name: 'Home',
  data() {
    return {
      active: 0,
      show: false
    }
  },
  components: {
    Mine,
    Find,
    Recommend
  },
  methods: {
    showPopup() {
      this.show = true
    },
    logOut: async function() {
      const { data: res } = await this.axios.get('/api/users/logout')
      if (res.code === 200) {
        this.$dialog
          .confirm({
            title: '标题',
            message: res.msg
          })
          .then(() => {
            window.sessionStorage.removeItem('username')
            this.$router.push('/login')
          })
          .catch(() => {
            // on cancel
          })
      }
    }
  }
}
</script>

<style scoped lang-='less'>
::v-deep .van-tab__text {
  font-size: 32px;
}
::v-deep .van-tabs--line .van-tabs__wrap {
  height: 2.375rem;
  width: 80%;
  margin-left: 10%;
}
::v-deep .van-tab__pane,
::v-deep .van-tab__pane-wrapper {
  box-sizing: content-box;
}
.home {
  position: relative;
  margin-top: 32px;
}
.iconfont {
  position: absolute;
  z-index: 999;
  font-size: 40px;
}
.iconfenlei {
  top: 0;
  left: 32px;
  width: 64px;
}
.iconsousuo2 {
  top: 0;
  right: 32px;
}
.logOut {
  text-decoration: underline;
}
</style>
